<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Test Column Resizer</title>
		<meta name="viewport" content="width=800">
		<style>
			@import "../../../dojo/resources/dojo.css";
			@import "../../css/skins/claro.css";
			.heading {
				font-weight: bold;
				padding-bottom: 0.25em;
			}
			.dgrid {
				width: 750px;
				margin: 10px;
			}
			#grid .field-col1 {
				width: 100px;
			}
			#grid .field-col2 {
				width: 100px;
			}
			#grid .field-col3 {
				width: auto;
			}
			#grid .field-col4 {
				width: 100px;
			}
			#grid .field-col5 {
				width: 150px;
			}
			
			#gridWide .field-col1,
			#gridWide .field-col2,
			#gridWide .field-col3,
			#gridWide .field-col4,
			#gridWide .field-col5 {
				width: 200px;
			}

			#gridPrevent .field-col1 {
				width: 100px;
			}
			#gridPrevent .field-col2 {
				width: 100px;
			}
			#gridPrevent .field-col3 {
				width: auto;
			}
			#gridPrevent .field-col4 {
				width: 100px;
			}
			#gridPrevent .field-col5 {
				width: 150px;
			}

			#gridPersist .field-col1 {
				width: 100px;
			}
			#gridPersist .field-col2 {
				width: 100px;
			}
			#gridPersist .field-col3 {
				width: 100px;
			}
			#gridPersist .field-col4 {
				width: 100px;
			}
			#gridPersist .field-col5 {
				width: 150px;
			}
			
			.testrelative {
				position: relative;
				left: 25px;
				top: 25px;
				width: 750px;
			}
		</style>
		<script>
			var start= new Date().getTime();
		</script>
		<script src="../../../dojo/dojo.js" 
			data-dojo-config="async: true"></script>
		<script>
			require(["dgrid/OnDemandGrid", "dgrid/extensions/ColumnResizer", "dgrid/Keyboard", "dgrid/Selection", "dojo/_base/declare", "dojo/_base/lang", "dojo/on", "dojo/cookie", "dojo/json", "dgrid/test/data/base", "dojo/domReady!"],
				function(Grid, ColumnResizer, Keyboard, Selection, declare, lang, on, cookie, json, testStore){
					var columns = { // you can declare columns as an object hash (key translates to field)
						col1: 'Column 1Column1Column 1 Column 1',
						col2: {label: 'Column2222222222222222222222222', sortable: false},
						col3: { label: 'Column3333333333333333333', resizable: false },
						col4: 'Column 4',
						col5: 'Column 5'
					};
					columns1 = lang.clone(columns);

					// columns2 tests using an array of columns with explicit IDs,
					// including special characters to test replacement
					columns2 = [
						{ id: "col:2", field: "col2", label: "Column 2" },
						{ id: "col:4", field: "col4", label: "Column 4", sortable: false },
						{ id: "col:1", field: "col1", label: "Column 1" },
						{ id: "col:5", field: "col5", label: "Column 5" }
					];

					var ResizeGrid = declare([Grid, Selection, ColumnResizer]);
					window.grid = new ResizeGrid({
						sort: "id",
						store: testStore,
						columns: columns1
					}, "grid");
					window.gridPeriod = new (declare([Grid, Keyboard, Selection, ColumnResizer]))({
						id: "gridPeriod",
						sort: "id",
						store: testStore,
						columns: columns1
					}, "grid.period");
					window.gridWide = new ResizeGrid({
						sort: "id",
						store: testStore,
						columns: lang.clone(columns)
					}, "gridWide");
					window.gridPrevent = new ResizeGrid({
						sort: "id",
						store: testStore,
						columns: lang.clone(columns)
					}, "gridPrevent");

					var columnWidths = cookie('dgrid-columnWidths');
					columnWidths = columnWidths ? json.parse(columnWidths) : {};

					var persistentColumns = lang.clone(columns);
					for(var name in persistentColumns){
						if(name in columnWidths){
							if(typeof persistentColumns[name] === 'string'){
								persistentColumns[name] = { label: persistentColumns[name] };
							}
							persistentColumns[name].width = columnWidths[name];
						}
					}
					window.gridPersist = new ResizeGrid({
						sort: "id",
						store: testStore,
						columns: persistentColumns
					}, "gridPersist");

					on(document.body, 'dgrid-columnresize', function(event){
						var grid = event.grid;
						console.log('grid ' + grid.id + ' Column "' + event.columnId + '" size changed: ' + event.width +
							(event.parentType ? " (triggered by " + event.parentType + ")" : ""));
						if(grid === window.gridPrevent && event.width > 200){
							event.preventDefault();
						}
						if(grid === window.gridPersist && event.parentType){
							// Persist new width to cookie
							columnWidths[event.columnId] = event.width;
							cookie('dgrid-columnWidths', json.stringify(columnWidths));
						}
					});
				});
		</script>
	</head>
	<body class="claro">
		<h2>A basic grid with column resizing</h2>
		<div id="grid"></div>
		<div>Buttons to test changing column structure:
			<button onclick="grid.set('columns', columns2);">New Structure</button>
			<button onclick="grid.set('columns', columns1);">Original</button>
		</div>
		<div>Buttons to test adjusting last column when resizing below the table's width:
			<button onclick="grid.set('adjustLastColumn', true);">Enable</button>
			<button onclick="grid.set('adjustLastColumn', false);">Disable</button>
		</div>
		<h2>A basic grid with Keyboard navigation and a period in its ID, to ensure injected size rules work</h2>
		<div id="grid.period"></div>
		<h2>Another grid w/ columns whose width initially exceed the table's width,
			placed within a relatively-positioned element</h2>
		<div class="testrelative">
			<div id="gridWide"></div>
		</div>
		<h2>Grid w/ columns whose resize will be prevented if the column will end up larger than 200px</h2>
		<div id="gridPrevent"></div>
		<h2>Grid w/ columns whose sizes will persist across page refreshes</h2>
		<div id="gridPersist"></div>
	</body>
</html>
